<template>
  <el-container class="layout-container-demo" style="min-height: 100%">
    <!-- 侧边栏aside -->
     <el-aside
        :width="sideWidth + 'px'"
        style="
            min-height: 100%;
            background-color: rgb(48, 65, 86);
            box-shadow: 2px 0 6px rgb(0 21 41 / 35%);
        "
        >
          <Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow"/>
     </el-aside>

    <el-container style="margin-left: 7px">
     <!-- 头部header -->
     <el-header style=" border-bottom: 1px solid #be9191;height: 53px;">
        <Header :collapseBtnClass="collapseBtnClass" :collapse="collapse"/>
     </el-header>

      <!-- 主体区 -->
      <el-main>
        <!-- <transition name="el-fade-in">
            子路由
            <router-view  /> 
        </transition>  -->

        <router-view v-slot="{ Component }">
          <transition name="el-fade-in">
            <component :is="Component" />
          </transition>
        </router-view>
          
        
      </el-main>
      </el-container>
  </el-container>
</template>

<script>
import Aside from '@/components/Aside.vue';
import Header from '@/components/Header.vue';

export default {
  name: "Manage",
  components:{
    Aside,
    Header,
  },
  data() {
    return {
      // aside
      collapseBtnClass: "Fold",
      isCollapse: false,
      sideWidth: 200,
      logoTextShow: true,
    };
  },
  

  methods: {
   
    // 侧边栏收缩
    collapse() {
      //console.log("@@@");
      // 点击收缩按钮触发
      this.isCollapse = !this.isCollapse;
      if (this.isCollapse) {
        // 收缩
        this.sideWidth = 64;
        this.collapseBtnClass = "Expand";
        this.logoTextShow = false;
      } else {
        // 展开
        this.sideWidth = 200;
        this.collapseBtnClass = "Fold";
        this.logoTextShow = true;
      }
    },
    
  },
};
</script>

<style scoped>
.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
  font-size: 22px;
  margin-right: 40px;
}
</style>

<style>

</style>
